<template>
  <div>
   <tables  :delDataApi="delCarType"  :loadDataApi="getCarTypes" v-on:onAdd="onAdd" v-on:onEdit="onEdit"  :tableCofig="tableConfig" ref="tables"  :columns="columns" />
   <Drawer title="车辆类型" v-model="isShopPanel" width="300" :style="formPanelStyles" :mask-closable="false">
            <Form ref="formValidate" :model="formData" :rules="ruleValidate"  :label-width="80" label-position="left"  >
                <FormItem label="名称">
                        <Input v-model="formData.typeName" placeholder="请输入类型名称" />
                </FormItem>
                 <FormItem label="长度" prop="lenght" >
                        <InputNumber   placeholder="请输入长度" v-model="formData.lenght" ></InputNumber>
                 </FormItem>
                 <FormItem label="宽度" prop="width">
                        <InputNumber   placeholder="请输入宽度" v-model="formData.width" ></InputNumber >
                 </FormItem>
                 <FormItem label="高度" prop="height">
                    <InputNumber   placeholder="请输入高度" v-model="formData.height" ></InputNumber >
                </FormItem>
                <FormItem prop="weight" label="载重量">
                    <InputNumber placeholder="请输入载重量" v-model="formData.weight" ></InputNumber >
                </FormItem>
               <Input  type="textarea" placeholder="请输入载重量" :rows="4" v-model="formData.remark"  clearable></Input >
        </Form>
        <div class="drawer-footer">
            <Button style="margin-right: 8px" @click="isShopPanel = false">取消</Button>
            <Button type="primary" :loading="saveStatus" @click="add">
                <span v-if="!saveStatus">保存</span>
                <span v-else>正在保存中...</span>
            </Button>
        </div>
    </Drawer>
  </div>
  
</template>

<script>
import Tables from '_c/tables'
import { getCarTypes, editCarType, delCarType} from '@/api/car/carApi'
export default {
  components: {
    Tables
  },
  data () {
    return {
      saveStatus:false,
      getCarTypes:getCarTypes,
      delCarType:delCarType,
      formData:{
          id:null,
          typeName:"",
          lenght:0,
          width:0,
          height:0,
          weight:0,
          remark:0
      },
      isShopPanel:false,
      formPanelStyles: {
          height: 'calc(100% - 55px)',
          overflow: 'auto',
          paddingBottom: '53px',
          position: 'static'
      },
      ruleValidate:{

      },
      tableConfig:{
          idKey:'typeId',
          border:true,
          stripe:true,
          noDataText:'暂无车辆类型信息',
          action:{
                title:"操作",
                showDel:true,
                showEdit:true,
                width:200,
                buttons:[
                    {title:'设置',action:(params=>{
                        debugger;
                           this.$router.push('carTypeFeign')
                    })}
                ]
          }
       },
      columns: [
        {type: 'selection',width:60,align:'center'},
        {title: 'No', type: 'index'},
        {title: '名称', key: 'typeName'},
        {title: '长度', key: 'lenght'},
        {title: '宽度', key: 'width'},
        {title: '高度', key: 'height'},
        {title: '载重量(Kg)', key: 'weight'},
        {title: '备注', key: 'remark', tooltip:true},
        {title: '创建时间', key: 'createTime',format:'date',align:'center'},
        {title: '创建人', key: 'createBy',width:80},
      ]
    }
  },
  methods: {
      
    add(){
          this.saveStatus=true;
          editCarType(this.formData)
          .then(res=>{
             this.saveStatus=false
             this.isShopPanel=false;
             this.$refs.tables.loadData();
          })
          .catch(err=>{
             this.saveStatus=false;
             this.$Message.error(err);
          });
    },
    onEdit(params){
        
    },
    onAdd(){
        this.isShopPanel=true;
    }
    
  },
  mounted () {
  }
}
</script>

<style>

</style>
